<script setup lang="ts">
const props = defineProps(["item"]);
</script>

<template>
  <li
    :style="{ lineHeight: '50px' }"
    class="relative w-full cursor-pointer text-base pl-5 hover:bg-#3b4248 hover:text-red-500"
  >
    <span>{{ props.item }}</span>
    <div
      class="absolute top-0.5 right-3 text-black text-sm"
      :style="{ lineHeight: '50px' }"
    >
      <el-icon>
        <CaretRight />
      </el-icon>
    </div>
  </li>
</template>

<!-- ClassifyItemPage.vue -->
<style scoped>
.relative {
  position: relative;
}
.w-full {
  width: 100%;
}
.cursor-pointer {
  cursor: pointer;
}
.text-base {
  font-size: 1rem;
}
.pl-5 {
  padding-left: 1.25rem;
}
.hover-bg-#3b4248:hover {
  background-color: #3b4248;
}
.hover-text-red-500:hover {
  color: #ef4444;
}
.absolute {
  position: absolute;
}
.top-0\.5 {
  top: 0.125rem;
}
.right-3 {
  right: 0.75rem;
}
.text-black {
  color: #000;
}
.text-sm {
  font-size: 0.875rem;
}
</style>
